<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/WorkspaceTemplate.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="top">
        top profile
    </ui:define>

    <ui:define name="left">
    </ui:define>

    <ui:define name="content">
        <style>
            .ui-helper-clearfix{
                display: inline-block;
            }
        </style>
        <h:form>
            <p:tabView>

                <p:tab title="Profile">
                    <p:commandButton value="Edit Info" action="#{workspaceManagerBean.redirectToEditMyInfo}"/>
                    <p:commandButton value="Change Password" action="#{workspaceManagerBean.redirectToEditPwd}"/>
                    <p:commandButton value="Change Profile Image" action="#{workspaceManagerBean.redirectToEditProfileImage}"/>
                    <p:fieldset legend="Basic Info">
                        <h:panelGrid columns="2">
                            <p:panel header="Profile Picture" rendered="#{fileUploadManagerBean.profileShouldRendered()}">
                                <p:graphicImage id="profileImage" value="#{facesContext.externalContext.requestContextPath}/../displayImage?id=#{fileUploadManagerBean.getProfileImageId()}" 
                                                height="177" width="177"/>
                            </p:panel>
                            <p:panel>
                                <h:panelGrid columns="2">
                                    <h:outputLabel value="First Name:"/>
                                    <h:outputText value="#{workspaceManagerBean.currentStaff.firstName}"/>

                                    <h:outputLabel value="Last Name:"/>
                                    <h:outputText value="#{workspaceManagerBean.currentStaff.lastName}"/>

                                    <h:outputLabel value="Department: "/>
                                    <h:outputText value="#{workspaceManagerBean.currentStaff.department}"/>
                                </h:panelGrid>
                            </p:panel>
                        </h:panelGrid>

                        <p:panel>
                            <h3>Home Address</h3>
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Address Line 1:"/>
                                <h:outputText value="#{workspaceManagerBean.currentStaff.homeAddress.addressLine1}"/>

                                <h:outputLabel value="Address Line 2:"/>
                                <h:outputText value="#{workspaceManagerBean.currentStaff.homeAddress.addressLine2}"/>

                                <h:outputLabel value="Zip Code:"/>
                                <h:outputText value="#{workspaceManagerBean.currentStaff.homeAddress.zipCode}"/>

                                <h:outputLabel value="City:"/>
                                <h:outputText value="#{workspaceManagerBean.currentStaff.homeAddress.city}"/>

                                <h:outputLabel value="State:"/>
                                <h:outputText value="#{workspaceManagerBean.currentStaff.homeAddress.stateName}"/>

                                <h:outputLabel value="Country:"/>
                                <h:outputText value="#{workspaceManagerBean.currentStaff.homeAddress.country}"/>
                            </h:panelGrid>
                        </p:panel>

                        <p:panel>
                            <h3>
                                Contact Numbers
                            </h3>
                            <p:dataTable value="#{workspaceManagerBean.currentStaff.phones}" var="phone">
                                <p:column headerText="Phone Type">
                                    <h:outputText value="#{phone.phoneTypeString}"/>
                                </p:column>

                                <p:column headerText="Phone Type">
                                    <h:outputText value="#{phone.number}"/>
                                </p:column>
                            </p:dataTable>
                        </p:panel>
                    </p:fieldset>

                    <p:fieldset legend="Security Roles Assigned">
                        <p:panel>
                            <h:panelGrid columns="1">
                                <c:forEach items="#{workspaceManagerBean.currentStaff.securityRoles}" var="role" varStatus="forLoop">
                                    <h:outputText value="#{role.roleName}"/>
                                </c:forEach>
                            </h:panelGrid>
                        </p:panel>
                    </p:fieldset>

                    <p:fieldset legend="My Account">
                        <p:panel>
                            <p:dataTable value="#{workspaceManagerBean.currentStaff.systemUserAccount}" var="sua">
                                <p:column headerText="Username">
                                    <h:outputText value="#{sua.username}"/>
                                </p:column>

                                <p:column headerText="Email Address">
                                    <h:outputText value="#{sua.emailAddress}"/>
                                </p:column>

                                <p:column headerText="Account Status">
                                    <h:outputText value="#{sua.status}"/>
                                </p:column>
                            </p:dataTable>
                        </p:panel>
                    </p:fieldset>
                </p:tab>

                <p:tab title="Address Book">
                    <p:panel>
                        <p:dataTable widgetVar="staffTable" var="staff" value="#{workspaceManagerBean.allStaff}"
                                     emptyMessage="No staff found with give criteria">
                            <f:facet name="header">
                                <p:outputPanel>
                                    <h:outputText value="Search all fields: "/>
                                    <p:inputText id="globalFilter" onkeyup="staffTable.filter()" style="width:150px" />
                                </p:outputPanel>
                            </f:facet>

                            <p:column filterBy="#{staff.fullName}"
                                      headerText="Name" 
                                      filterMatchMode="contains">
                                <h:outputText value="#{staff.fullName}"/>
                            </p:column>

                            <p:column filterBy="#{staff.systemUserAccount.emailAddress}"
                                      headerText="Email Address" 
                                      filterMatchMode="startsWith">
                                <h:outputText value="#{staff.systemUserAccount.emailAddress}"/>
                            </p:column>

                            <p:column filterBy="#{staff.bizHp}"
                                      headerText="Biz HP" 
                                      filterMatchMode="startsWith">
                                <h:outputText value="#{staff.bizHp}"/>
                            </p:column>

                            <p:column filterBy="#{staff.bizTel}"
                                      headerText="Biz Tel" 
                                      filterMatchMode="startsWith">
                                <h:outputText value="#{staff.bizTel}"/>
                            </p:column>
                        </p:dataTable>
                    </p:panel>
                </p:tab>

            </p:tabView>
        </h:form>
    </ui:define>

    <ui:define name="bottom">
       
    </ui:define>

</ui:composition>
